<!-- description: 充值成功后的页面 -->
<!-- fileName: afterService.vue -->
<!-- author: iwen(1044803551@qq.com) -->

<script setup name='afterService'>
	//引入方法
	import {
		ref
	} from 'vue'
	import {
		apiSystemSetting
	} from '@/api/systemApi.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const kfImg = ref('')

	// 获取售后客服
	const getkfImg = async () => {
		let res = await apiSystemSetting('service_members')
		kfImg.value = res.data.content
	}

	//
	onLoad(() => {
		getkfImg()
	})
</script>

<template>
	<view class="afterService">
		<div class="tip">充值/开通完成</div>
		<view class="tip">
			添加<view class="sub-tip">“云图AI”售后会员群</view>，获取更多资讯
		</view>
		<image :src="kfImg" class="kf-img"></image>
		<view class="tip">
			长按进入售后会员群
		</view>

		<navigator url="/pages/index/index" hover-class="none" open-type="switchTab" class="work-btn-style btn">
			返回首页
		</navigator>
	</view>
</template>

<style lang='scss' scoped>
	.afterService {
		padding-top: 220rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.tip {
			font-size: 28rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;

			.sub-tip {
				color: #FFD24A;
			}
		}

		.kf-img {
			width: 280rpx;
			height: 280rpx;
			border-radius: 5rpx;
			overflow: hidden;
			margin: 88rpx auto 24rpx;
		}

		.btn {
			width: 686rpx;
			height: 78rpx;
			font-size: 30rpx;
			font-weight: 700;
			color: #080808;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
            left: 0;
            right: 0;
			bottom: calc(var(--window-bottom) + 20px);
            margin: 0 auto;
		}
	}
</style>